<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="title">输入您的密码</view>
			<view class="tips">
				<view>请输入我们发送给您的代码</view>
				<view style="color: #0065ff;">{{email}}</view>
			</view>
			<view class="code_box">
				<u-code-input v-model="code" :maxlength="6" size="calc((590rpx)/6)" space="8" fontSize="24"
					focus></u-code-input>
				<view class="code_tips">
					<view v-if="!isTime" class="">重新发送代码({{Math.floor((time/1000))}}s)</view>
					<view v-else class="send" @tap="resendCode">重新发送代码</view>
				</view>
			</view>
			<view class="form">
				<view class="form_item">
					<view class="form_title">
						密码
					</view>
					<view class="input_box flex">
						<input type="password" v-model="form.password" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						确认密码
					</view>
					<view class="input_box flex">
						<input type="password" v-model="form.againPwd" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						交易密码
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.security_password" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_title">
						邀请码
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.invCode" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="fixed">
					<view class="done btn flex_between" @tap="register">
						<text>完成</text>
						<uni-icons custom-prefix="iconfont" type="icon-duigou" color="#fff" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		registerApi,
		sendEmail
	} from "@/api/api.js"
	export default {
		components: {
			headerView,
		},
		data() {
			return {
				email: '',
				code: "",
				form: {},
				time: 60000,
				timer: null,
				isTime: false
			};
		},
		onLoad(options) {
			this.email = options.email || '';
			this.code = options.code || '';
			console.log(this.code)
			this.resend()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			resend() {
				if (this.time == 60000) {
					this.isTime = false
					this.timer = setInterval(() => {
						this.time = this.time - 30
						if (this.time <= 0) {
							clearInterval(this.timer)
							this.time = 60000
							// console.log(this.time)
							this.isTime = true
						}
					}, 30)
				}
			},
			// 重新发送验证码
			resendCode() {
				// 调用发送邮件接口，传入参数email和event
				sendEmail({
						email: this.email,
						event: "reg"
					})
					.then((res) => {
						console.log(res.data);
						this.code = res.data.data.code; // 刷新返回的code值
						console.log(this.code)
						this.resend(); // 重新开始倒计时
					})
					.catch((error) => {
						console.error("邮件发送失败", error);
						uni.$u.toast("邮件发送失败，请稍后重试");
					});
			},
			register() {
				if (this.code === "") {
					uni.$u.toast(this.$t('验证码不能为空'));
					return;
				}
				if (this.form.password === "") {
					uni.$u.toast(this.$t('密码不能为空'));
					return;
				}
				if (this.form.againPwd !== this.form.password) {
					uni.$u.toast(this.$t('两次密码输入必须一致'));
					return;
				}
				if (this.form.security_password === "") {
					uni.$u.toast(this.$t('交易密码不能为空'));
					return;
				}

				let data = {
					email: this.email,
					code: this.code,
					password: this.form.password,
					security_password: this.form.security_password,
				};

				registerApi(data)
					.then(res => {
						console.log(res.data);
						uni.setStorageSync("token", res.data.data.token);
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/login/login"
									});
								}, 500);
							}
						});
					})
					.catch(error => {
						console.error('注册失败', error);
						uni.$u.toast(error.data.msg || '注册失败，请稍后重试');
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		height: auto;

		.content {
			padding-bottom: 40rpx;
			// position: relative;
			padding-right: 0;

			.title {
				padding-top: 60rpx;
				font-size: 30px;
				font-weight: 500;
				font-family: PM;
				line-height: 92rpx;
			}

			.tips {
				opacity: .5;
				margin-top: 20rpx;
			}

			.code_box {
				margin-top: 100rpx;
				padding-right: 40rpx;

				.code_tips {
					opacity: .5;
					margin-top: 40rpx;
					text-align: center;

					.send {
						color: #0065ff;
						text-decoration: underline;
					}
				}
			}

			.form {
				margin-top: 40rpx;

				.form_item {
					padding: 40rpx 40rpx 0 0;

					.form_title {
						font-family: PM;
						opacity: .8;
						line-height: 42rpx;
					}

					.input_box {
						width: 100%;
						margin-top: 20rpx;
						background-color: hsla(0, 0%, 92.9%, .46);
						border-radius: 20rpx;
						font-size: 30rpx;
						padding: 0 40rpx;
						height: 98rpx;
						line-height: 98rpx;
						border: 4rpx solid #3d3d3d;
						font-weight: 600;
						font-family: PM;
					}
				}

				.fixed {
					.btn {
						height: 100rpx;
						line-height: 100rpx;
						color: #fff;
						font-size: 32rpx;
						padding: 0 40rpx;
						border-radius: 20rpx;
						background-image: url("../../static/img/btn_bg.png");
						background-size: cover;
						background-repeat: no-repeat;
						overflow: hidden;
						// position: absolute;
						// right: 0;
						// left: 0;
						// bottom: 10vh;
					}

					.done {
						background-color: #0065ff;
						margin-left: 40rpx;
						margin-top: 8vh;
						border-radius: 20rpx 0 0 20rpx;
					}
				}
			}
		}
	}



	/deep/.u-code-input__item {
		border: none !important;
		background: #f7f7f7;
		border-radius: 20rpx;
		font-weight: bold;
		font-family: PM;
	}
</style>